const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base.config')
// 引入 .env 配置
const dotenv = require("dotenv")
const DotenvPlugin = require('dotenv-webpack')
const devEnvPath = path.resolve(__dirname, '../.env.dev')
dotenv.config({
  path: devEnvPath
})

const webpackDevConfig = {
  mode: 'development',
  // 具体区别 参考：https://blog.csdn.net/Magneto7/article/details/115339508
  devtool: 'eval-cheap-module-source-map',
  output: {
    // 打包后的public path，即基础路径
    publicPath: process.env.PUBLIC_URL || '/',
  },
  stats: "errors-only",
  devServer: {
    // 端口
    port: process.env.PORT || 9527,
    // History 模式，404 路由返回 index
    historyApiFallback: false,
    // 开启 gzips 压缩 
    compress: true,
    // 是否打开浏览器
    open: false,
    client: {
      // 出现编译错误或警告时，在浏览器中显示全屏覆盖。
      overlay: true,
    },
    // 启用代理
    proxy: {
      // '/api/users' 的请求会将请求代理到 'http://localhost:3000/api/users'
      '/api': 'http://localhost:3000',
    },
  },
  plugins: [
    // 热更新
    new webpack.HotModuleReplacementPlugin(),
    new DotenvPlugin({
      path: devEnvPath
    })
  ]
}

module.exports = merge(webpackBaseConfig, webpackDevConfig)